// ConnectScreen.qml - 连接服务器界面
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    color: "#f8f9fa"  // 设置背景颜色

    // 背景装饰元素 - 圆形装饰
    Rectangle {
        width: 300
        height: 300
        radius: width / 2  // 圆形
        color: "#e3f2fd"   // 浅蓝色
        opacity: 0.6       // 半透明
        x: -width / 3      // 部分超出左边界
        y: -height / 3     // 部分超出上边界
    }

    // 第二个背景装饰元素
    Rectangle {
        width: 200
        height: 200
        radius: width / 2  // 圆形
        color: "#bbdefb"   // 更浅的蓝色
        opacity: 0.4       // 更透明
        x: parent.width - width / 2  // 右下角位置
        y: parent.height - height / 2
    }

    // 主布局 - 垂直列布局
    ColumnLayout {
        anchors.centerIn: parent  // 居中显示
        width: Math.min(parent.width * 0.8, 400)  // 宽度不超过400px或父容器的80%
        spacing: 20  // 子项间距

        // 标题区域
        ColumnLayout {
            Layout.alignment: Qt.AlignHCenter  // 水平居中
            spacing: 5  // 子项间距

            // 连接图标
            Image {
                Layout.alignment: Qt.AlignHCenter
                source: "qrc:/images/connect-icon.svg" // 连接图标路径
                sourceSize.width: 60
                sourceSize.height: 60
                fillMode: Image.PreserveAspectFit  // 保持宽高比

                // 图标加载失败时的备用文本
                Text {
                    visible: parent.status === Image.Error || parent.source === ""
                    text: "🔗"  // 链接表情符号
                    font.pixelSize: 40
                    anchors.centerIn: parent
                }
            }

            // 主标题
            Text {
                text: qsTr("加入会议")  // 国际化翻译
                font.pixelSize: 28
                font.weight: Font.Bold  // 粗体
                color: "#2c3e50"        // 深蓝色
                Layout.alignment: Qt.AlignHCenter
            }

            // 副标题
            Text {
                text: qsTr("连接到视频聊天服务器")
                font.pixelSize: 14
                color: "#7f8c8d"  // 灰色
                Layout.alignment: Qt.AlignHCenter
            }
        }

        // 表单区域
        ColumnLayout {
            spacing: 15  // 表单项间距
            Layout.fillWidth: true  // 填充宽度

            // 服务器IP输入框组
            ColumnLayout {
                spacing: 5
                Layout.fillWidth: true

                // IP地址标签
                Text {
                    text: qsTr("服务器IP地址")
                    font.pixelSize: 14
                    color: "#34495e"  // 深灰色
                }

                // IP地址输入框
                TextField {
                    id: ipInput
                    Layout.fillWidth: true
                    placeholderText: qsTr("请输入服务器IP地址")  // 占位文本
                    font.pixelSize: 16
                    selectByMouse: true  // 允许鼠标选择文本
                    text: "localhost"   // 默认值
                    padding: 12

                    // 自定义背景
                    background: Rectangle {
                        radius: 8  // 圆角
                        border.color: ipInput.activeFocus ? "#3498db" : "#ddd"  // 聚焦时蓝色边框
                        border.width: ipInput.activeFocus ? 2 : 1
                        color: "white"  // 白色背景
                    }
                }
            }

            // 端口输入框组
            ColumnLayout {
                spacing: 5
                Layout.fillWidth: true

                // 端口标签
                Text {
                    text: qsTr("端口")
                    font.pixelSize: 14
                    color: "#34495e"
                }

                // 端口输入框
                TextField {
                    id: portInput
                    Layout.fillWidth: true
                    placeholderText: qsTr("请输入端口号")
                    font.pixelSize: 16
                    selectByMouse: true
                    text: "10000"  // 默认端口号
                    validator: IntValidator { bottom: 1; top: 65535 }  // 端口号范围验证 (1-65535)
                    padding: 12

                    background: Rectangle {
                        radius: 8
                        border.color: portInput.activeFocus ? "#3498db" : "#ddd"
                        border.width: portInput.activeFocus ? 2 : 1
                        color: "white"
                    }
                }
            }
        }

        // 按钮区域
        ColumnLayout {
            spacing: 10
            Layout.fillWidth: true

            // 连接按钮
            Button {
                id: connectBtn
                Layout.fillWidth: true
                text: qsTr("连接")
                font.pixelSize: 16
                font.weight: Font.Medium  // 中等粗细
                enabled: ipInput.text && portInput.acceptableInput  // IP和有效端口号时才启用
                padding: 15

                // 绿色按钮样式
                background: Rectangle {
                    radius: 8
                    color: connectBtn.enabled ? "#2ecc71" : "#bdc3c7"  // 启用时绿色，禁用时灰色
                    opacity: connectBtn.down ? 0.8 : 1.0  // 按下时变透明
                }

                // 按钮文本样式
                contentItem: Text {
                    text: connectBtn.text
                    font: connectBtn.font
                    color: "white"  // 白色文字
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                // 点击事件处理
                onClicked: {
                    root.joinMeeting(ipInput.text, portInput.text)  // 调用加入会议功能
                }
            }

            // 返回按钮
            Button {
                id: returnBtn
                Layout.fillWidth: true
                text: qsTr("返回")
                font.pixelSize: 16
                padding: 12
                flat: true  // 扁平样式

                background: Rectangle {
                    radius: 8
                    color: returnBtn.down ? "#ecf0f1" : "transparent"  // 按下时显示背景色
                }

                contentItem: Text {
                    text: returnBtn.text
                    font: returnBtn.font
                    color: "#7f8c8d"  // 灰色文字
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                onClicked: {
                    root.showStartScreen()  // 返回到开始界面
                }
            }
        }
    }
}
